<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06自定义JS对象</title>
</head>
<body>
<table border="1px">
    <caption>商品表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>

</table>

<script>
    //定义一个数组,模拟从服务器请求回来的多个商品对象
    let productArr = [
        {title: '小米14', price: 8000, num: 200},
        {title: '华为Mate60', price: 5000, num: 100},
        {title: '苹果16', price: 10000, num: 700},
        {title: '魅族', price: 2000, num: 600}
    ];
    console.log(productArr);
    /* 提示:数组里有几件商品,表格里就有几个tr 遍历数组 */
    //1.获取表格元素
    let tableE = document.querySelector('table');
    //2.遍历数组
    for (let i = 0; i < productArr.length; i++) {
        //3.循环几次,就创建几个tr,以及*3的td
        let trE = document.createElement('tr');
        let titleTd = document.createElement('td');
        let priceTd = document.createElement('td');
        let numTd = document.createElement('td');
        //4.将当前遍历到的商品的数据,存入对应的td中
        titleTd.innerHTML = productArr[i].title;
        priceTd.innerHTML = productArr[i].price;
        numTd.innerHTML = productArr[i].num;
        //5.将准备好的3个td装入tr中
        trE.append(titleTd, priceTd, numTd);
        //6.将tr装入表格中
        tableE.append(trE);
    }
    ;

    // 1.创建一个自带属性与方法的js对象
    let p1 = {
        name: '张三',
        age: 18,
        say: function () {
            console.log('我是' + this.name + '，今年' + this.age + '岁')
        }
    };
    console.log(p1)
    p1.say();

    // 1.创建一个自带属性与方法的js对象
    let p2 = {}
    p2.name = '李四'
    p2.age = 20
    p2.say = function () {
        console.log('我是' + this.name + '，今年' + this.age + '岁')
    };
    console.log(p2)
    p2.say();

</script>

</body>
</html>